<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./css/04.css">
  <script src="./jquery/jquery.js"></script>
  <script src="./js/04.js"></script>
</head>
<body>
    <p itany="1111" id="p1" style="color:rgb(165, 42, 42);font-weight: bolder;font-size: 30px;">元素1</p>
    <p itany="2222" style="color:darkgreen">元素2</p>
    <p itany="3333" style="color:darkblue">元素3</p>
    <p itany="4444" style="color:orange">元素4</p>
    <input type="button" value="#p1元素的样式取值" onclick="getStyle1()">
    <input type="button" value="#p1元素的样式赋值" onclick="setStyle2()">
    <hr>
    <input type="button" value="p元素的样式取值" onclick="getStyl3()">
    <input type="button" value="p元素的样式赋值" onclick="setStyle4()">
    <hr>
    <input type="button" value="p元素的属性取值" onclick="getAttr5()">
    <input type="button" value="p元素的属性赋值" onclick="setAttr5()">
    <input type="button" value="p元素的属性删除" onclick="removeAttr5()">
    <hr>

    <div id="c1" class="fc fs">class样式的操作方法</div>
    <div class="fc fs">class样式的操作方法</div>
    <input type="button" value="#c1的class取值" onclick="getClassFun()">
    <input type="button" value="#c1的class添加" onclick="addClassFun()">
    <input type="button" value="#c1的class删除" onclick="removeClassFun()">
    <input type="button" value="#c1的class切换" onclick="toggleClassFun()">
    <hr>
    <input type="button" value="div的class添加" onclick="addAllClassFun()">
    <input type="button" value="div的class删除" onclick="removeAllClassFun()">
    <input type="button" value="div的class切换" onclick="toggleAllClassFun()">
    <hr>
    <form>
        <div>
            <input type="text" id="text" value="默认值">
        </div>
        <br>
        <div>
            男<input type="radio" name="sex" value="男" >
            女<input type="radio" name="sex" value="女" >
            保密<input type="radio" name="sex" value="保密" >
        </div>
        <br>
        <div>
            html<input type="checkbox" name="skill" value="html" >
            css<input type="checkbox" name="skill" value="css" >
            js<input type="checkbox" name="skill" value="js" >
        </div>
        <br>
        <div>
            <select name="sel" id="sel">
                <option value="">请选择</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
        </div>
        <br>
        <div>
            <textarea id="textarea" name="info" cols="30" rows="2">默认值</textarea>
        </div>
        <input type="reset" value="重置为默认值">
        <hr>
    </form>
    <input type="button" value="#text输入值获取" onclick="getInputValue()">
    <input type="button" value="#text输入值修改" onclick="setInputValue()">
    <hr>
    <input type="button" value="input[name=sex]单选按钮获取值" onclick="getRadioValue()">
    <input type="button" value="input[name=sex]单选按钮的选中修改" onclick="setRadioValue()">
    <hr>
    <input type="button" value="input[name=skill]多选按钮获取值" onclick="getCheckboxValue()">
    <input type="button" value="input[name=skill]多选按钮的选中修改" onclick="setCheckboxValue()">
    <hr>
    <input type="button" value="#sel下拉列表获取值" onclick="getSelectValue()">
    <input type="button" value="#sel下拉列表修改" onclick="setSelectValue()">
    <hr>
    <input type="button" value="#textarea多行文本框获取值" onclick="getTextareaValue()">
    <input type="button" value="#textarea多行文本框修改" onclick="setTextareaValue()">

</body>
</html>